<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image:
                linear-gradient(rgba(235, 130, 109, 0.5), rgba(248, 123, 206, 0.5), rgba(254, 234, 131, 0.5), rgba(247, 204, 169, 0.5));
                height: 100vh;
                
            }
        * {
            margin: 0;
        }
        nav {
            margin: 0 auto;
            /* height: 100vh; */
            height: 100%;
            width: 90%;
            display: flex;
        }
        
        side {
            height: 80%;
            min-height: 440px;
            background-color: rgba(135, 205, 252, 0.6);
            width: 15em;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            transition: 1s;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            
        }
        side>div{
            width:10em;
            height: 10em;
            border:1px solid rgb(255, 255, 255);
            border-radius: 50%;
            overflow: hidden;
            transition: 1s;
            box-shadow: 0 0 8px 3px rgba(85, 177, 238, 0.692);
           
        }
        side>*{
            margin-top: 10px;
        }
        side > span{
            display: inline-flexbox;
            width:inherit;
            height: 3em;
            background: gray;
        }
        img{
            width: 100%;
            height: 100%;
        }

        header {
            text-align: center;
            background: transparent;
            background: rgba(120, 215, 20, 0.3);
            width: 100%;
            height: 5em;
            position: fixed;
            top: 0;
            z-index: 2;
            backdrop-filter: blur(1px);
            -webkit-backdrop-filter: blur(1px);
            display: none;
        }

        .outside {
            flex-grow: 4;
            background: rgba(198, 233, 69, 0.205);
            /* min-width: 50%; */
        }

        .outside>div {
            width: inherit;
            height: 5em;
            background: rgba(255, 236, 131, 0.432);
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            transition: 1s;
            
        }

        .outside>content {
            width: inherit;
            height: calc(100% - 5em);
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            overflow: auto;
            

        }

        .outside>content>section {
           
            margin: 10px;
            width: 45%;
            height: 24em;
            background: rgba(255, 255, 255, 0.3);
            border-radius: .5em;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: 1s;
        }

        @media screen and (max-width:1500px) {
            .outside>content>section {
                width: 90%;
                height: 24em;
            }
        }
        @media screen and (max-width:1120px){
            side{
                transition: 1s;
                width: 11em;
            }
            side>div{
                transition: 1s;
                 width: 8em;
                 height: 8em;
            }
            
        }
        @media screen and (max-width:900px){
            side,side>div,side>span{
                width: 0;
            }
            side *{
                transition: 1s ;
                z-index: -15;
                opacity: 0;
                
                
                
            }
            .outside>content>section{
                min-width: 60%;
                height: 15em;
            }
           .outside>div{
               height: 8%;
           }
           header{
               height: 4em;
           }
        }
    </style>
</head>

<body>
    <header>123</header>
    <nav>
        <side>
            <div onclick="fn()">
                <img src="../public/001.png"/>
            </div>
            <span>
                123
            </span>
            <span>
                123
            </span>
            <span>
                123
            </span>
            <span>
                123
            </span>
            
        </side>
        <div class="outside">
            <div></div>
            <content>
                <section>
                    <div>123654789321</div>
                </section>
                <section>
                    
                    <div>123654789321</div>
                </section>
                <section>
                    
                    <div>123654789321</div>
                </section>
                <section>
                    
                    <div>123654789321</div>
                </section>
            </content>
        </div>
    </nav>
</body>
<script>
    let tops = document.querySelector('header')
    function fn(){
        console.log(1)
    }
    var scrollFunc = function (e) {
        var direct = 0;
        e = e || window.event;
        if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                tops.style.display = 'block'
                setTimeout(() => {
                    tops.style.display = 'none'
                }, 1000);
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                tops.style.display = 'none'
            }
        }
    }
    //给页面绑定滑轮滚动事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //滚动滑轮触发scrollFunc方法
    window.onmousewheel = document.onmousewheel = scrollFunc;


</script>

</html>